<template>
    <div class="shopcar-wraper">
        <div class="icon" @click="flag=!flag">{{order.num}}</div>
        <div class="price">￥{{order.price}}</div>
        <div class="pay">支付</div>
 
        <ul class="order-list" v-show="flag">
            <li v-for="(item,i) in order.list" :key="item.id" v-if="item.num">
                <span class="name">{{item.name}}</span>
                <span class="price">￥{{item.price}}</span>
                <span class="reduce" @click="changeOrder(item,item.num-1)"></span>
                <span class="num">{{item.num}}</span>
                <span class="plus" @click="changeOrder(item,item.num+1)"></span>


            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            order: {
                type: Object
            }
        },
        data(){
            return{
                flag:true
            }
        },
        methods: {
            changeOrder(item, newNum) {
                var target = item
                var flag = this.order.list.find((n) => n.id === target.id);
                if (newNum < item.num) {
                    this.order.num -= 1;
                    this.order.price -= item.price;
                    flag.num -= 1;

                } else {
                    this.order.num += 1;
                    this.order.price += item.price;
                    flag.num += 1;

                }
                this.$emit("input",this.order);

            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .shopcar-wraper {
        width: 6rem;
        height: 50px;
        display: flex;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0.1rem;
        color: #fff;
        border-radius: 0.4rem;
        background-color: #333;
    }

    .shopcar-wraper>div {
        height: 100%;
        line-height: 50px;
    }

    .shopcar-wraper .icon {
        padding: 0px 50px 0px 0.4rem;
    }

    .shopcar-wraper .pay {
        position: absolute;
        right: 0px;
        background: #f40;
        padding: 0 0.6rem;
        border-top-right-radius: 0.4rem;
        border-bottom-right-radius: 0.4rem;
    }

    .shopcar-wraper .order-list {
        width: 5.4rem;
        background-color: #f4f4f4;
        position: absolute;
        bottom: 54px;
        left: 50%;
        margin-left: -2.7rem;
        /* transform: translateX(-50%); */
        z-index: 999;
        color: #000;
        list-style: none;
    }

    .shopcar-wraper .order-list>li {
        position: relative;
        width: 100%;
        height: 45px;
        padding: 12.5px 30px;
        box-sizing: border-box;
        font-size: 0;
        display: flex;
    }

    .shopcar-wraper .order-list>li span {
        display: inline-block;
        height: 20px;
        font-size: 14px;

    }

    .shopcar-wraper .order-list>li span.name {
        font-weight: 600;
        font-size: 14px;

        width: 70px;
    }

    .shopcar-wraper .order-list>li span.reduce,
    .shopcar-wraper .order-list>li span.plus {
        width: 20px;
        height: 20px;
        background-color: #f40;
        border-radius: 50%;
        flex: 0 0 20;
    }

    .shopcar-wraper .order-list>li span.reduce {
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 1px solid #f40;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .shopcar-wraper .order-list>li span.price {
        color: #f40;
        font-size: 16px;
        margin-right: 80px;

    }

    .shopcar-wraper .order-list>li span.num {
        /* position: absolute;
    right: 30px; */
        font-size: 18px;
        font-weight: 400;
        margin: 0px 8px;

    }
</style>